<template>
  <view class="message-layout">
    <my-header title="全部消息">
      <template v-slot:menu>
        <text style="font-size: 28rpx; color: white" @click="readAll">一键已读</text>
      </template>
    </my-header>
    <my-content class="content">
      <!-- <view class="header">
			 <view class="back" @click="back()">返回</view>	
			 <view class="header_title">系统消息</view>	
			 <view class="read" @click="readAll()">一键已读</view>	
		</view> -->

      <scroll-view
        class="scroll"
        refresher-background=""
        :refresher-triggered="refreshStatus"
        @refresherrefresh="refresh"
        :refresher-enabled="true"
        scroll-y="true"
        @scrolltolower="lower"
      >
        <view class="message">
          <view @click="nextPage(item)" class="message_item" v-for="item in messageData" :key="item.id">
            <view class="time">{{ item.created_at }}</view>
            <view class="item-bg">
              <view class="item_header">
                <view class="item_title">
<!--                  <view class="dot" v-if="item.read == 0"></view>-->
                  <text class="title">
                    【{{ item.title }}】
                    <text class="item_content">{{ item.content }}</text>
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api'

export default {
  data() {
    return {
      messageData: [],
      page: 1,
      last_page: 1,
      refreshStatus: false,
    }
  },
  onLoad(option) {},
  onShow() {
    this.refresh()
  },
  methods: {
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getData(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getData(2)
    },
    back() {
      uni.navigateBack()
    },
    getData(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.messages
        .index()
        .then((res) => {
          uni.hideLoading()
          this.refreshStatus = false
          if (res.code === 200) {
            if (type == 1) {
              this.messageData = this.messageData.concat(res.data.data)
            } else {
              this.messageData = res.data.data
            }
            this.last_page = res.data.last_page
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    nextPage(item) {
      this.readOne(item.id)
      if (item.url) {
        this.header(item.url)
        // this.header('/pages/content/messageDetail?id=' + item.id)
      }
    },

    readOne(id) {
      api.messages
        .readOne(id)
        .then((res) => {
          if (res.code === 200) {
            console.log(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    readAll() {
      uni.showLoading({
        title: '消息处理中',
      })
      api.messages
        .readAll()
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.refresh()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.message-layout {
  height: 100vh;
  background-image: url('https://www.dingxians.cn/upload/images/common/bg.png');
  background-size: 100% 100%;
}

.content {
  height: 100%;

  .header {
    display: flex;
    padding-top: 80rpx;
    justify-content: space-between;
    align-items: center;
    width: 690rpx;
    margin: 0 auto;
    height: 50rpx;
    padding-bottom: 20rpx;

    .header_title {
      font-weight: bold;
    }

    .read {
      font-size: 30rpx;
      color: #999;
    }
  }

  .scroll {
    height: calc(100vh - 150rpx);
  }

  .message {
    display: flex;
    flex-direction: column;

    .time {
      color: #fff;
      text-align: center;
      font-size: 22rpx;
    }

    .item-bg {
      padding: 30rpx;
      margin-top: 10rpx;
    }

    .message_item {
      display: flex;
      flex-direction: column;
      padding: 30rpx;

      .item_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;

        .item_title {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: red;

          .dot {
            width: 14rpx;
            height: 14rpx;
            margin-right: 20rpx;
            border-radius: 50%;
            background-color: red;
          }
        }
      }

      .item_content {
        color: #fff;
        font-size: 26rpx;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
